<template>
    <div class='wrap'>
      <div class="crule-main">
        <div class="crule-contain">
          <div class="crule"></div>
          <div id="btn_h" @click='goto'></div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    goto () {
      this.$router.push('/competition/1')
    },
    isCanPrize () {
      this.$http.isCanPrize(this.GLOBAL.player.openId).then(
        (result) => {
          this.GLOBAL.player.isCanPrize = result.data
        }
      ).catch((error) => {
        console.error(error)
      })
    }
  },
  beforeCreate () {
    this.GLOBAL.validate()
  },
  mounted: function () {
    document.getElementsByTagName('body')[0].className = 'bgimg'
    // 添加返回事件监听
    let that = this
    history.pushState(null, null, '')
    window.onpopstate = function (event) {
      that.$router.push({path: '/mode'})
    }
    this.isCanPrize()
  },
  beforeDestroy: function () {
    document.body.removeAttribute('class', 'bgimg')
  }
}
</script>

<style>
.bgimg {
  background:url('../assets/home/bg.png') no-repeat;
  background-size:cover;
}
.wrap {
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
}
.crule-main {
  display: flex;
  background:url('../assets/crule/bg_18.png') no-repeat;
  background-size:20.5rem;
  min-height: 36rem;
  min-width: 20.5rem;
  flex-direction: column;
  align-items: center;
}
.crule-contain {
  display: flex;
  flex-direction: column;
  margin-top: 5rem;
  justify-content: space-between;
  align-items: center;
  width: 18rem;
  height: 31.6rem;
}
.crule-main #btn_h {
  margin: 0 auto;
  height: 3.5rem;
  width: 12rem;
  background:url('../assets/crule/btn_15.png') no-repeat;
  background-size:12rem 3.5rem;
  margin-bottom: 6rem;
}
.crule {
  height: 5.5rem;
  width: 17.5rem;
  background:url('../assets/crule/bg_37.png') no-repeat;
  background-size:17.5em 5.5rem;
  justify-content: flex-end;
}
</style>
